<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析 - 图书馆座位预约系统</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入基础样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入数据分析页面专用样式 -->
    <link rel="stylesheet" href="css/data-analysis.css">
</head>
<body>
    <div class="main-container">
        <!-- 左侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-book-open"></i>
                    <span>图书馆管理系统</span>
                </div>
                <button class="close-btn" id="closeSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <nav class="sidebar-menu">
                <a href="index.html" class="menu-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>系统概览</span>
                </a>
                <a href="seat-management1.html" class="menu-item">
                    <i class="fas fa-chair"></i>
                    <span>座位管理</span>
                </a>
                <a href="booking-management.html" class="menu-item">
                    <i class="fas fa-calendar-alt"></i>
                    <span>预约管理</span>
                </a>
                <a href="user-management1.html" class="menu-item">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
                <a href="data-analysis.html" class="menu-item active">
                    <i class="fas fa-chart-line"></i>
                    <span>数据分析</span>
                </a>
                <a href="report-statistics.html" class="menu-item">
                    <i class="fas fa-file-alt"></i>
                    <span>报表统计</span>
                </a>
                <a href="system-settings.html" class="menu-item">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://picsum.photos/id/237/40/40" alt="管理员头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">管理员</div>
                        <div class="user-role">系统管理员</div>
                    </div>
                </div>
                <button class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </button>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <div class="content-container">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="navbar-left">
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1 class="page-title">数据分析</h1>
                </div>
                
                <div class="navbar-right">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    
                    <div class="notification-bell">
                        <i class="fas fa-bell"></i>
                        <span class="notification-count">3</span>
                    </div>
                    
                    <div class="theme-toggle">
                        <i class="fas fa-moon"></i>
                    </div>
                    
                    <div class="user-menu">
                        <img src="https://picsum.photos/id/237/40/40" alt="管理员头像" class="user-avatar">
                    </div>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <main class="content">
                <!-- 数据筛选和控制区域 -->
                <div class="filters-section">
                    <div class="filter-controls">
                        <div class="filter-group">
                            <label>时间范围：</label>
                            <select id="timeRange">
                                <option value="week">本周</option>
                                <option value="month" selected>本月</option>
                                <option value="quarter">本季度</option>
                                <option value="year">本年</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        
                        <div class="filter-group custom-date" style="display: none;">
                            <input type="date" id="startDate">
                            <span>至</span>
                            <input type="date" id="endDate">
                        </div>
                        
                        <div class="filter-group">
                            <label>数据维度：</label>
                            <select id="dataDimension">
                                <option value="all">全部数据</option>
                                <option value="seats">座位相关</option>
                                <option value="bookings">预约相关</option>
                                <option value="users">用户相关</option>
                            </select>
                        </div>
                        
                        <button class="apply-filter-btn">
                            <i class="fas fa-filter"></i>
                            应用筛选
                        </button>
                        
                        <button class="refresh-btn">
                            <i class="fas fa-sync-alt"></i>
                            刷新数据
                        </button>
                        
                        <button class="export-btn">
                            <i class="fas fa-download"></i>
                            导出报告
                        </button>
                    </div>
                </div>
                
                <!-- 核心指标卡片 -->
                <div class="metrics-row">
                    <div class="metric-card">
                        <div class="metric-icon"><i class="fas fa-chair"></i></div>
                        <div class="metric-content">
                            <div class="metric-title">平均座位利用率</div>
                            <div class="metric-value">76.2%</div>
                            <div class="metric-change">
                                <span class="positive">+2.5%</span>
                                <span class="change-label">较上月</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="metric-card">
                        <div class="metric-icon"><i class="fas fa-calendar-check"></i></div>
                        <div class="metric-content">
                            <div class="metric-title">平均日预约量</div>
                            <div class="metric-value">862</div>
                            <div class="metric-change">
                                <span class="positive">+12.3%</span>
                                <span class="change-label">较上周</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="metric-card">
                        <div class="metric-icon"><i class="fas fa-user-check"></i></div>
                        <div class="metric-content">
                            <div class="metric-title">平均履约率</div>
                            <div class="metric-value">93.8%</div>
                            <div class="metric-change">
                                <span class="negative">-1.2%</span>
                                <span class="change-label">较上月</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="metric-card">
                        <div class="metric-icon"><i class="fas fa-users"></i></div>
                        <div class="metric-content">
                            <div class="metric-title">活跃用户数</div>
                            <div class="metric-value">3,256</div>
                            <div class="metric-change">
                                <span class="positive">+8.7%</span>
                                <span class="change-label">较上季度</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 使用率趋势图 -->
                <div class="chart-row">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>座位使用率趋势</h3>
                            <div class="chart-controls">
                                <select class="chart-time-select">
                                    <option value="day">按天</option>
                                    <option value="week" selected>按周</option>
                                    <option value="month">按月</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="chart-placeholder" id="usageTrendChart"></div>
                        </div>
                    </div>
                    
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>预约时段分布</h3>
                            <div class="chart-controls">
                                <select class="chart-time-select">
                                    <option value="day" selected>按天</option>
                                    <option value="week">按周</option>
                                    <option value="month">按月</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="chart-placeholder" id="bookingTimeDistributionChart"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户行为分析 -->
                <div class="chart-row">
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>用户活跃度分布</h3>
                            <div class="chart-controls">
                                <select class="chart-type-select">
                                    <option value="bar" selected>柱状图</option>
                                    <option value="pie">饼图</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="chart-placeholder" id="userActivityChart"></div>
                        </div>
                    </div>
                    
                    <div class="chart-card">
                        <div class="chart-header">
                            <h3>用户预约偏好</h3>
                            <div class="chart-controls">
                                <select class="chart-type-select">
                                    <option value="bar">柱状图</option>
                                    <option value="pie" selected>饼图</option>
                                </select>
                            </div>
                        </div>
                        <div class="chart-body">
                            <div class="chart-placeholder" id="userPreferenceChart"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 详细数据分析 -->
                <div class="data-tables-row">
                    <div class="table-card">
                        <div class="table-header">
                            <h3>楼层使用对比</h3>
                            <div class="table-controls">
                                <button class="view-details-btn">查看详情</button>
                            </div>
                        </div>
                        <div class="table-body">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>楼层</th>
                                        <th>区域数</th>
                                        <th>座位数</th>
                                        <th>使用率</th>
                                        <th>预约数</th>
                                        <th>平均时长</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1楼</td>
                                        <td>4</td>
                                        <td>320</td>
                                        <td>89.6%</td>
                                        <td>2,856</td>
                                        <td>3.2h</td>
                                    </tr>
                                    <tr>
                                        <td>2楼</td>
                                        <td>5</td>
                                        <td>380</td>
                                        <td>76.3%</td>
                                        <td>2,584</td>
                                        <td>2.8h</td>
                                    </tr>
                                    <tr>
                                        <td>3楼</td>
                                        <td>4</td>
                                        <td>350</td>
                                        <td>68.9%</td>
                                        <td>2,137</td>
                                        <td>2.5h</td>
                                    </tr>
                                    <tr>
                                        <td>4楼</td>
                                        <td>3</td>
                                        <td>206</td>
                                        <td>59.4%</td>
                                        <td>1,212</td>
                                        <td>2.1h</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 异常分析 -->
                <div class="data-tables-row">
                    <div class="table-card">
                        <div class="table-header">
                            <h3>异常数据统计</h3>
                            <div class="table-controls">
                                <button class="view-details-btn">查看详情</button>
                                <button class="export-table-btn">导出</button>
                            </div>
                        </div>
                        <div class="table-body">
                            <table class="data-table">
                                <thead>
                                    <tr>
                                        <th>异常类型</th>
                                        <th>发生次数</th>
                                        <th>占比</th>
                                        <th>趋势</th>
                                        <th>处理状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>超时未履约</td>
                                        <td>236</td>
                                        <td>42.8%</td>
                                        <td class="trend negative">↑12.3%</td>
                                        <td class="status pending">处理中</td>
                                        <td>
                                            <button class="action-btn">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>连续预约</td>
                                        <td>148</td>
                                        <td>26.9%</td>
                                        <td class="trend positive">↓8.7%</td>
                                        <td class="status resolved">已处理</td>
                                        <td>
                                            <button class="action-btn">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>设备故障</td>
                                        <td>89</td>
                                        <td>16.2%</td>
                                        <td class="trend positive">↓4.5%</td>
                                        <td class="status resolved">已处理</td>
                                        <td>
                                            <button class="action-btn">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>账号异常</td>
                                        <td>78</td>
                                        <td>14.2%</td>
                                        <td class="trend negative">↑6.1%</td>
                                        <td class="status pending">处理中</td>
                                        <td>
                                            <button class="action-btn">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <!-- 加载动画 -->
    <div class="loading-overlay" style="display: none;">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>加载中...</p>
        </div>
    </div>
    
    <!-- 提示框 -->
    <div class="toast" style="display: none;"></div>
    
    <!-- 引入主JavaScript文件 -->
    <script src="js/main.js"></script>
    <!-- 引入数据分析页面专用JavaScript文件 -->
    <script src="js/data-analysis.js"></script>
</body>
</html>